
<template>
	<div class="for_index">
		<div class="for_index_top">
			<div class="into_index">首页
				<i class="el-icon-close"></i>
			</div>
			<div class="current">待支付
				<i class="el-icon-close"></i>
			</div>
		</div>
		<div class="for_index_bottom">
			<div class="for_index_bottom_new">
				<div class="for_index_bottom_new_goods">
					<div class="for_index_bottom_new_goods_btn">
					</div>
					<div class="for_index_bottom_new_goods_screening">
						<div class="for_index_bottom_new_goods_screening_left">
							<i>下单时间</i>
							<el-date-picker
							    v-model="value2"
							    type="datetimerange"
							    :picker-options="pickerOptions"
							    range-separator="至"
							    start-placeholder="开始日期"
							    end-placeholder="结束日期"
							    align="right"
							>
								</el-date-picker>
						</div>
						<div class="for_index_bottom_new_goods_screening_right">
							<el-input
							    v-model="input"
							    placeholder="请输入订单信息查询"
							></el-input>
								<button>
									<i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="for_index_bottom_table_box">
				<div class="for_index_bottom_table">
					<table>
						<tr>
							<th>序号</th>
							<th>订单号</th>
							<th>下单时间</th>
							<th>下单人</th>
							<th>手机号</th>

							<th>操作</th>
						</tr>
						<tr
						    v-for="(v,i) in tableList"
						    :key="i"
						>
							<td>{{v.order_code}}</td>
							<td>{{v.order_no}}</td>
							<td>{{v.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</td>
							<td>{{v.realname}}</td>
							<td>{{v.phone}}</td>
							<td>
								<button
								    class="editor"
								    @click='_toShopInfo'
								    :data-id="v.id"
								>详情</button>
									<!-- <button class="shelves">接单</button> -->
									<!-- <button class="delete">关闭订单</button> -->
							</td>
							</tr>
							<tr v-if="tableList.length == 0">
								<td
								    class="table_title"
								    colspan="8"
								>当前数据空空如也</td>
							</tr>
					</table>
				</div>
				<div class="for_index_bottom_page">
					<div class="for_index_bottom_page_left">
					</div>
					<div class="for_index_bottom_page_right">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pagesize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total"
							background>
							</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [], // 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      sid: null
    };
  },
  mounted() {
    this.sid = localStorage.getItem("sid");
    this._getOrdersList();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this._getOrdersList();
    },
    handerInto() {
      this.$router.push({ path: "/forDetails" });
    },
    // 获取待支付列表
    _getOrdersList() {
      let params = {
        decoration_id: this.sid,
        status: 3,
        keyword: "",
        start_date: "",
        end_date: "",
        page: this.page,
        pagesize: this.pagesize
      };
      this.$http.post('/api/admin/decoration/DesignOrder/index',params).then(res => {
        console.log(res, 123);
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total; //总条数
        }
      });
    },
    //点击详情跳转
    _toShopInfo(e) {
      console.log(e);
      let order_id = e.target.dataset.id;
      this.$router.push({ path: `/payDetailsDecora?order_id=${order_id}` });
    }
  }
};
</script>

<style lang="less" scoped="scoped">
@import "index.less";
</style>
